{% extends "orga/generic/list.html" %}

{% load compress %}
{% load i18n %}
{% load static %}

{% block create_button_label %}{% translate "New track" %}{% endblock create_button_label %}

{% block stylesheets %}
    {% compress css %}
        <link rel="stylesheet" href="{% static "orga/css/dragsort.css" %}">
    {% endcompress %}
{% endblock stylesheets %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static "common/js/modalDialog.js" %}"></script>
        <script defer src="{% static "orga/js/dragsort.js" %}"></script>
    {% endcompress %}
{% endblock scripts %}

{% block page_title %}
    {{ generic_title }}
    <span data-dialog-target="#info-dialog" data-toggle="dialog">
        <i class="fa fa-question-circle-o text-info ml-2"></i>
    </span>
{% endblock page_title %}

{% block list_content %}
    <dialog id="info-dialog">
        <div class="alert alert-info">
            {% blocktranslate trimmed %}
                Tracks are used to sort your sessions into categories. You can use the
                CfP settings to determine if speakers can select the track for their session
                themselves. Track colors are helpful to help attendees navigate your schedule.
            {% endblocktranslate %}
        </div>
    </dialog>
    <div class="table-responsive-sm">
        <table class="table table-sm table-flip table-sticky">
            <thead>
                <tr>
                    <th>{% translate "Track" %}</th>
                    <th>{% translate "Color" %}</th>
                    <th class="numeric">{% translate "Proposals" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody dragsort-url="{{ request.cfp.urls.tracks }}">
                {% for track in track_list %}
                    <tr dragsort-id="{{ track.id }}">
                        <td>
                            <a href="{{ track.urls.edit }}">{{ track.name }}</a>
                            {% if track.requires_access_code %}
                                <i class="fa fa-lock ml-1" title="{% translate "Requires access code" %}"></i>
                            {% endif %}
                        </td>
                        <td>
                            <div class="color-square" style="background: {{ track.color }}"></div>
                        </td>
                        <td class="numeric">
                            <a href="{{ request.event.orga_urls.submissions }}?track={{ track.id }}">{{ track.submissions.all.count }}</a>
                        </td>
                        <td class="text-right">
                            <button draggable="true" class="btn btn-sm btn-primary mr-1 dragsort-button" title="{% translate "Move item" %}">
                                <i class="fa fa-arrows"></i>
                            </button>
                            <a href="{{ track.urls.prefilled_cfp.full }}"
                               title="{% translate "Go to pre-filled CfP form" %}"
                               class="btn btn-sm btn-info">
                                <i class="fa fa-link"></i>
                            </a>
                            <a href="{{ track.urls.edit }}" class="btn btn-sm btn-info">
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="{{ track.urls.delete }}" class="btn btn-sm btn-danger">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% include "orga/includes/pagination.html" %}

{% endblock list_content %}
